﻿@page "/cascadingvaluesparameterstheme"
@layout CascadingValuesParametersLayout
@using BlazorSample.UIThemeClasses

<h1>Cascading Values & Parameters - Theme</h1>

<p>Current count: @currentCount</p>

<p><button class="btn btn-primary" @onclick="IncrementCount">Increment Counter (Unthemed)</button></p>

<p><button class="btn @ThemeInfo.ButtonClass" @onclick="IncrementCount">Increment Counter (Themed)</button></p>

@code {
    private int currentCount = 0;

    [CascadingParameter]
    protected ThemeInfo ThemeInfo { get; set; }

    private void IncrementCount()
    {
        currentCount++;
    }
}

<p>The layout component (<em>CascadingValuesParametersLayout.razor</em>) supplies a cascading <code>ThemeInfo</code> object to the components of the <code>Body</code> property that use this layout:</p>

<pre><code>@@inherits LayoutComponentBase
@@using BlazorSample.UIThemeClasses

&lt;div class="sidebar"&gt;
    &lt;NavMenu /&gt;
&lt;/div&gt;

&lt;div class="main"&gt;
    &lt;CascadingValue Value="theme"&gt;
        &lt;div class="content px-4"&gt;
            @@Body
        &lt;/div&gt;
    &lt;/CascadingValue&gt;
&lt;/div&gt;

@@code {
    private ThemeInfo theme = new ThemeInfo { ButtonClass = "btn-success" };
}</code></pre>

<p>This component (<em>CascadingValuesParametersTheme.razor</em>) receives the <code>ThemeInfo</code> as a <code>CascadingParameter</code>. The parameter is used to style one of the buttons:</p>

<pre><code>&lt;button class="btn" @@onclick="IncrementCount"&gt;Increment Counter (Unthemed)&lt;/button&gt;

&lt;button class="btn @@ThemeInfo.ButtonClass" @@onclick="IncrementCount"&gt;Increment Counter (Themed)&lt;/button&gt;

@@code {
    private int currentCount = 0;

    [CascadingParameter]
    protected ThemeInfo ThemeInfo { get; set; }

    private void IncrementCount()
    {
        currentCount++;
    }
}</code></pre>
